<template>
  <div class="DbCarousel">
    <div class="db-middle">
      <div class="db-floor">
        <div class="carousel slide" id="banner">
          <!-- 准备轮播的图区域 -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <router-link to="/readmore">
                <img :src="src" alt="" class="d-block w-100" />
              </router-link>
            </div>
            <div class="carousel-item">
              <router-link to="/readmore">
                <img :src="src1" alt="" class="d-block w-100" />
              </router-link>
            </div>
            <div class="carousel-item">
              <router-link to="/readmore">
                <img :src="src2" alt="" class="d-block w-100" />
              </router-link>
            </div>
            <div class="carousel-item">
              <router-link to="/readmore">
                <img :src="src3" alt="" class="d-block w-100" />
              </router-link>
            </div>
          </div>
          <!-- 控制左右 -->
          <a href="#banner" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a href="#banner" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
          <!-- 指示符区域 -->
          <ul class="carousel-indicators db-key">
            <li class="active" data-target="#banner" data-slide="0"></li>
            <li data-target="#banner" data-slide="1"></li>
            <li data-target="#banner" data-slide="2"></li>
            <li data-target="#banner" data-slide="3"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: "./image/carousel/10243.jpg",
      src1: "./image/carousel/10433.jpg",
      src2: "./image/carousel/10714.jpg",
      src3: "./image/carousel/10725.jpg",
    };
  },
};
</script>

<style lang="scss">
.db-middle {
  width: 100%;
  min-width: 1320px;
  margin: 0 auto;
  .db-floor {
    width: 1200px;
    margin: 0 auto;
    padding-top: 10px;
    box-sizing: content-box;
    margin-right: auto;
    margin-left: auto;
    padding-right: 60px;
    padding-left: 60px;
    margin-bottom: 30px;

    .db-key li {
      width: 12px;
      height: 12px;
      background-color: #ddd;
      border-radius: 50%;
    }

    .db-key .active {
      background-color: #0aa1ed;
    }
  }
}
</style>